<template>
	<view class="content">
		<view class="header">
			<view class="tap">
				<view class="tap-item" :class="tap == 0 ? 'active':''" data-index="0" @click="changeTap">
					我要鉴宝
				</view>
				<view class="tap-item" :class="tap == 1 ? 'active':''" data-index="1" @click="changeTap">
					预约过户
				</view>
			</view>
		</view>
		<view class="group">
			<view class="item" v-if="tap==0">
				<text class="title">宝物名称*</text>
				<input type="text" v-model="goodsName" placeholder="请输入"/>
			</view>
			<view class="item" v-if="tap==1" @click="selectTreasure">
				<text class="title">选择宝物*</text>
				<!-- <picker mode="selector" :range="treasureArr" v-model="treasure" @change="selectTreasure"> -->
					<view class="row-center">{{treasure || '请选择'}}<image style="width: 30upx;" src="../../../static/images/arrow_right.png" mode="widthFix"></image></view>
				<!-- </picker> -->
			</view>
			<view class="item">
				<text class="title">姓名*</text>
				<input type="text" @input="nameAction" :value="name" placeholder="请输入"/>
			</view>
			<view class="item">
				<text class="title">联系电话*</text>
				<input type="number" maxlength="11" :value="phone" @input="phoneAction" placeholder="请输入"/>
			</view>
			<view class="item">
				<text class="title">预约时间*</text>
				<picker mode="date" @change="selectDate" v-model="date" :start="start_date" >
					<view class="row-center">{{date || '请选择'}}<image style="width: 30upx;" src="../../../static/images/arrow_right.png" mode="widthFix"></image></view>
				</picker>
			</view>
			<view class="item" v-if="tap==0">
				<text class="title">预约地址*</text>
				<input type="text" v-model="addgress" placeholder="请输入"/>
			</view>
		</view>
		<view class="bottom-view">
			<view class="commint-btn" @click="commintAppoinment">提交预约</view>
		</view>
	</view>
</template>

<script>
	import {
		judgeAppointment,
		transferAppointment
	} from '@/api/peopleHide.js'
	import {
		getUserInfo
	} from '@/api/user.js';
	export default{
		data() {
			return {
				tap: 0,
				goodsName:'',
				name:'',
				phone:'',
				addgress:'',
				date:'',
				treasure:'',
				treasureId:'',
				treasureArr:['王羲之兰亭集序','达芬奇鸡蛋','蒙娜丽莎的微笑','八骏图','清明上河图'],
				start_date:"2021-11-17"
			}
		},
		onLoad() {
		  this.getUserInfo()	
		},
		computed:{
			tom(){
				var timestamp = (new Date()).getTime()+24*60*60*1000;
				const date = new Date(timestamp);
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();	
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;				
				return `${year}-${month}-${day}`;
			}
		},
		methods:{
			/**
			 * 获取个人用户信息
			 */
			getUserInfo: function() {
				let that = this;
				getUserInfo().then(res => {
					that.userInfo = res.data
					that.$store.commit("SETUID", res.data.uid);
					that.name = res.data.real_name || res.data.nickname || ''
					that.phone = res.data.phone || ''
				});
			},
			nameAction(e){
			 // console.log(e.detail.value)
			 this.name = e.detail.value
			},
			phoneAction(e){
			 // console.log(e.detail.value)
			 this.phone = e.detail.value
			},
			// selectTreasure(e){
			// 	let index = e.detail.value
			// 	this.treasure = this.treasureArr[index]
			// },
			selectTreasure(e){
				uni.navigateTo({
					url:"/pages/users/user_treasure/index?isSelect=" + true
				})
			},
			selectDate(e){
				if(this.getDate()==e.detail.value){
					uni.showToast({
					    title: '请选择今天之后的时间！',
					    duration: 2000,
						icon:'none'
					});
				}else{
					this.date = e.detail.value
				}
				
			},
			changeTap(e) {
				let index = e.currentTarget.dataset.index
				if (this.tap != index) {
					this.tap = index
				}
			},
			// 预约鉴宝
			judgeAppointment(){
				judgeAppointment({
					treasure_name:this.goodsName,
					user_name:this.name,
					user_phone:this.phone,
					appointment_date:this.date,
					address_detail:this.addgress
				}).then(res=>{
					uni.showModal({
						content:'您的预约已成功提交 我们将尽快联系您',
						showCancel:false,
						success(res) {
						  if(res.confirm){
							uni.navigateTo({
								url:'/pages/users/user_appointment_list/index?tap=0'
							})  
						  }	
						}
					})
				})
			},
			//预约过户
			transferAppointment(){
			  transferAppointment({
				  treasure_id:this.treasureId,
				  user_name:this.name,
				  user_phone:this.phone,
				  appointment_date:this.date,
			  }).then(res=>{
				 uni.showModal({
				 	content:'您的预约已成功提交 我们将尽快联系您',
				 	showCancel:false,
				 	success(res) {
				 	  if(res.confirm){
				 		uni.navigateTo({
				 			url:'../user_appointment_list/index?tap=1'
				 		})  
				 	  }	
				 	}
				 }) 
			  })	
			},
			commintAppoinment(){
				
				if(this.tap == 0){//预约鉴宝
					this.judgeAppointment()
				}else{
					this.transferAppointment()
				}
				
			},
			getDate() {
				
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();	
						
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #f4f5f6;
	}
	.header {
		display: flex;
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		flex-direction: column;
		align-items: center;
		z-index: 99;
		background-color: #fff;
		box-shadow: 0px 4rpx 8rpx 0px rgba(236, 236, 236, 0.50);
	    box-sizing: border-box;
		.tap {
			width: 100%;
			height: 94upx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.tap-item {
				display: flex;
				align-items: center;
				justify-content: center;
				height: 100%;
				flex: 1;
				position: relative;
				font-size: 32upx;
				font-weight: 400;
			}
	
			.active {
				color: #0A77DE;
				font-weight: 500;
			}
	
			.active:after {
				position: absolute;
				content: '';
				bottom: 0;
				width: 50upx;
				background-color: #0A77DE;
				height: 2upx;
			}
		}
	}
   .bottom-view{
	   display: flex;
	   align-items: center;
	   justify-content: center;
	   position: fixed;
	   left: 0;
	   bottom: 0;
	   height: 94upx;
	   width: 100%;
	   background-color: #fff;
	   .commint-btn{
		   display: flex;
		   align-items: center;
		   justify-content: center;
		   width: 692upx;
		   height: 88upx;
		   opacity: 1;
		   background: linear-gradient(90deg,#00acfe 0%, #0aace0 100%);
		   border-radius: 56upx;
		   color: #fff;
		   font-size: 32upx;
		   font-weight: 500;
	   }
   }
   .group{
	   width: 100%;
	   display: flex;
	   flex-direction: column;
	   margin-top: 114upx;
	   .item{
		   display: flex;
		   align-items: center;
		   width: 100%;
		   justify-content: space-between;
		   padding: 0 30upx;
		   box-sizing: border-box;
		   height: 96upx;
		   background-color: #fff;
		   position: relative;
		   .title{
			   color: #333;
			   font-size: 29upx;
			   width: 140upx;
			   min-width: 140upx;
			   margin-right: 10upx;
		   }
		   .row-center{
			   display: flex;
			   align-items: center;
		   }
	   }
	   .item:after{
	   	   position: absolute;
	   	   content: '';
	   	   bottom: 0;
	   	   height: 1px;
	   	   background-color: #EFEFEF;
	   	   left: 30upx;
	   	   right: 0;
	   }
   }
  input{
	  font-size: 28upx;
	  text-align: right;
  }
</style>
